<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
  </head>
  <body>
    <div id="area1">
      <div id="fourth">
        44
        <div class="fourth-item">xx</div>
        <div class="fourth-item">yy</div>
      </div>
      <div id="first">11</div>
      <div id="second">22</div>
      <div id="third">33</div>
    </div>
    <div id="area2">
      <button id="success" >xx</button>
      <div id="danger" align="center" >yy</div>
      <div id="primary">zz</div>
    </div>
    <form class="form"></form>
    <table class="table"></table>
    <div class="auto-complete">
        <input class="input-auto" list="menu" autocomplete="on"/>
        <div  class="menu">
            <div>"Internet Explorer"></div>
            <div>" Explorer"></div>
            <div>"Internet "></div>
        </div>
    </div>
    <div>xxxx</div>
    <style>
        *{
            margin: 0;
        }
        .auto-complete{
            width: 300px;
            box-sizing: border-box;
            border: solid 1px darkgreen;
            position: relative;

        }
        .input-auto{
            /*padding: 0;*/
            box-sizing: border-box;
            display: block;
            width: 100%;
        }
        .menu{
            box-sizing: border-box;
            border: solid 3px red;
            position: absolute;
            left: 30px;
            right:0;
            height: 220px;
            z-index: 100;
            overflow: hidden;
            visibility: hidden;
        }
      .fourth-item {
        width: 200px;
        height: 60px;
        background-color: burlywood;
      }
      #area2 {
        background-color: lightsteelblue;
      }

    </style>
    <script>
      let area1 = document.getElementById("area1");
      let success = document.getElementById("success");
      let danger = document.getElementById("danger");
      let form = document.getElementsByClassName("form")[0];
      let table = document.getElementsByClassName("table")[0];
      let area1Node = document.querySelector("#area1");
      let item1 = document.querySelector(".fourth-item");
      let target = document.querySelector(".input-auto");
      let items = document.getElementsByClassName("fourth-item");
      let itemsAll = document.querySelectorAll(".fourth-item");
      target.addEventListener("focus",()=>{

      })
    </script>
  </body>
</html>
